<template>
  <div class="website-config">
    <el-card class="config-card">
      <div slot="header" class="card-header">
        <h3>首页管理</h3>
      </div>

      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
        <!-- 基础信息配置 -->
        <el-form-item label="网站标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入网站标题"></el-input>
        </el-form-item>

        <!-- Logo上传 -->
        <el-form-item label="网站Logo" prop="logo">
          <div class="logo-uploader">
            <el-upload
              class="upload-demo"
              action="/api/upload"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :before-upload="beforeImageUpload"
              :on-change="handleLogoChange">
              <div v-if="logoUrl" class="logo-preview">
                <img :src="logoUrl" class="preview-image">
                <div class="logo-actions">
                  <i class="el-icon-zoom-in" @click.stop="handlePreview(logoUrl)"></i>
                  <i class="el-icon-delete" @click.stop="handleLogoRemove"></i>
                </div>
              </div>
              <i v-else class="el-icon-plus upload-icon"></i>
            </el-upload>
            <div class="upload-tip">建议尺寸: 200px * 60px，格式：PNG/JPG，大小不超过2M</div>
          </div>
        </el-form-item>

        <!-- 图片预览对话框 -->
        <el-dialog :visible.sync="previewVisible" append-to-body>
          <img width="100%" :src="previewUrl" alt="预览图片">
        </el-dialog>

        <!-- Banner图片上传 -->
        <el-form-item label="Banner图" prop="banners">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            list-type="picture-card"
            :file-list="formData.banners"
            :on-success="handleBannerSuccess"
            :on-remove="handleBannerRemove"
            :before-upload="beforeImageUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <!-- 首页说明文本 -->
        <el-form-item label="首页说明" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="4"
            placeholder="请输入首页说明文本">
          </el-input>
        </el-form-item>

         <!-- 公司介绍图片上传 -->
         <el-form-item label="公司图片" prop="companyimg">
          <el-upload
            class="upload-demo"
            action="/api/companyupload"
            list-type="picture-card"
            :file-list="formData.companyimg"
            :on-success="handleCompanyimgSuccess"
            :on-remove="handleCompanyimgRemove"
            :before-upload="beforeImageUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <!-- 厂商列表管理 -->
        <el-form-item label="厂商列表">
          <div class="vendor-list">
            <div v-for="(vendor, index) in formData.vendors" :key="index" class="vendor-item">
              <el-input v-model="vendor.name" placeholder="厂商名称"></el-input>
              <el-upload
                class="vendor-logo"
                action="/api/upload"
                :show-file-list="false"
                :on-success="(res) => handleVendorLogoSuccess(res, index)">
                <img v-if="vendor.logo" :src="vendor.logo" class="preview-image">
                <el-button v-else>上传logo</el-button>
              </el-upload>
              <el-button type="danger" @click="removeVendor(index)">删除</el-button>
            </div>
            <el-button type="primary" @click="addVendor">添加厂商</el-button>
          </div>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存配置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'WebsiteConfig',

  data() {
    return {
      formData: {
        title: '',
        logo: '',
        banners: [],
        description: '',
        companyimg: '',
        vendors: []
      },
      rules: {
        title: [
          { required: true, message: '请输入网站标题', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '请上传网站Logo', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入首页说明文本', trigger: 'blur' }
        ]
      },
      logoUrl: '', // 用于预览的临时URL
      previewVisible: false,
      previewUrl: ''
    }
  },

  methods: {
    // Logo上传前预览
    handleLogoChange(file) {
      if (file && file.raw) {
        this.logoUrl = URL.createObjectURL(file.raw)
      }
    },

    // Logo上传成功处理
    handleLogoSuccess(res) {
      this.formData.logo = res.url
      this.logoUrl = res.url
      this.$message.success('Logo上传成功')
    },

    // 删除Logo
    handleLogoRemove() {
      this.formData.logo = ''
      this.logoUrl = ''
      this.$message.success('Logo已删除')
    },

    // 预览图片
    handlePreview(url) {
      this.previewUrl = url
      this.previewVisible = true
    },

    // 图片上传前验证
    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件！')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB！')
        return false
      }
      return true
    },

    // Banner上传成功处理
    handleBannerSuccess(res) {
      this.formData.banners.push({ url: res.url })
      this.$message.success('Banner图片上传成功')
    },

    // Banner删除处理
    handleBannerRemove(file) {
      const index = this.formData.banners.findIndex(item => item.url === file.url)
      this.formData.banners.splice(index, 1)
    },

    // Companyimg上传成功处理
    handleCompanyimgSuccess(res) {
      this.formData.companyimg.push({ url: res.url })
      this.$message.success('Banner图片上传成功')
    },

    // Companyimg删除处理
    handleCompanyimgRemove(file) {
      const index = this.formData.companyimg.findIndex(item => item.url === file.url)
      this.formData.companyimg.splice(index, 1)
    },

    // 添加厂商
    addVendor() {
      this.formData.vendors.push({
        name: '',
        logo: ''
      })
    },

    // 删除厂商
    removeVendor(index) {
      this.formData.vendors.splice(index, 1)
    },

    // 厂商Logo上传成功处理
    handleVendorLogoSuccess(res, index) {
      this.formData.vendors[index].logo = res.url
      this.$message.success('厂商Logo上传成功')
    },

    // 提交表单
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 这里添加提交到后端的逻辑
          console.log('提交的表单数据：', this.formData)
          this.$message.success('配置保存成功')
        }
      })
    },

    // 重置表单
    resetForm() {
      this.$refs.formRef.resetFields()
      this.formData.vendors = []
    }
  }
}
</script>

<style scoped>
.website-config {
  padding: 20px;
}

.config-card {
  margin: 0 auto;
}

.preview-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.vendor-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.vendor-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vendor-logo {
  width: 100px;
}

.logo-uploader {
  /* text-align: center; */
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.upload-icon:hover {
  border-color: #409EFF;
}

.logo-preview {
  position: relative;
  width: 200px;
  height: 60px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.logo-preview:hover .logo-actions {
  opacity: 1;
}

.logo-actions i {
  color: #fff;
  font-size: 20px;
  margin: 0 10px;
  cursor: pointer;
}

.logo-actions i:hover {
  color: #409EFF;
}

.upload-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
}
</style>
